<template>
  <div class="inline">
    <el-select
      v-model="changedVal"
      clearable
      filterable
      remote
      :remote-method="filterItems"
      :loading="loading"
      placeholder="搜索道具"
      style="width:100%"
      @change="handleSelect(changedVal)"
    >
      <el-option
        v-for="row in list"
        :key="row.id"
        :label="row.item_name"
        :value="row.item_id + '@' + row.item_name"
      >
        <span>{{ row.item_id }} | {{ row.item_name }}</span>
      </el-option>
    </el-select>

    <div
      v-for="(item, index) in itemList"
      :key="index"
      class="items clearfix"
    >
      <span>{{ item.name }}</span>
      <div class="fr">
        <el-input-number v-model="item.num" class="nums" :min="1" />
        <el-button type="danger" icon="el-icon-delete" @click.prevent="remove(item)" />
      </div>
    </div>

  </div>
</template>

<script>

import { fetchItemsAll } from '@/api/gm'

export default {
  props: {

  },
  data() {
    return {
      loading: false,
      list: [],
      changedVal: '',
      itemList: [] // 已选择的道具
    }
  },
  computed: {
    gameList() {
      return this.$store.state.user.games
    }
  },
  mounted() {
    this.list = this.getItemsAll()
  },
  created() {
    // this.getItemsAll()
  },
  methods: {
    async getItemsAll(queryString) {
      const query = {
        keyword: queryString || ''
      }
      const response = await fetchItemsAll(query)
      this.list = response.data
      this.loading = false
    },

    filterItems(queryString) {
      this.loading = true
      setTimeout(() => {
        this.getItemsAll(queryString)
      }, 1000)
    },
    handleFilter() {
      this.$emit('transferFilter', this.searchForm)
    },
    remove(row) {
      var index = this.itemList.indexOf(row)
      if (index !== -1) {
        this.itemList.splice(index, 1)
      }
    },
    handleSelect(row) {
      if (!row) {
        return
      }
      const itemArr = row.split('@')
      if (this.itemList.length >= 9) {
        this.$message.error('单封最多发送9个物品！')
        return
      }
      for (let index = 0; index < this.itemList.length; index++) {
        if (this.itemList[index].id === itemArr[0]) {
          this.itemList[index].num += 1
          return
        }
      }
      this.itemList.push({
        id: itemArr[0],
        name: itemArr[1],
        num: 1
      })
    }

  }
}
</script>

<style>
  .filter-item {
    margin-right: 8px;
  }
  .k-type {
    width: 8em!important;
  }
  .keyword {
    width: 20em;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 8px;
  }
</style>

<style lang="scss" scoped>
  .items {
    margin-top: 15px;
     span {
       display: inline-block;
       margin-right: 15px;
       font-weight: 700;
       color: #409EFF;
     }
    .nums {
      display: inline-block;
      width: 13em;
      margin-right: 15px;
    }
  }
</style>
